<style scoped>
    .main {
        margin: 10px 100px;
    }

    .center-row {
        text-align: center;
        margin-left: -120px;
        margin-right: -120px;
    }

    .leader-img {
        width: 180px;
        height: 180px;
    }

    .leader-card {
        background-color: rgba(255, 255, 255, 0.1);
        margin-bottom: 8px;
    }

    .leader-card p {
        font-size: 24px;
    }

    .leader-card-title {
        height: 24px;
        color: #ffffff;
    }
</style>

<template>
    <div id="leader" class="main">
        <HeadTitle></HeadTitle>
        <Row :gutter="32" className="center-row">
            <i-col span="2">
                <Button size="large" type="primary" icon="chevron-left" long @click="toHome"></Button>
            </i-col>
        </Row>
        <Row :gutter="16">
            <i-col span="24" v-for="leader in leaders" :key="leader.id">
                <Card class="leader-card">
                    <p slot="title" class="leader-card-title">
                        <Icon type="person"></Icon>
                        {{leader.name}}
                    </p>
                    <Row>
                        <i-col span="3">
                            <img :src="leader.img" class="leader-img">
                        </i-col>
                        <i-col span="21">
                            <p>性别：{{renderGender(leader.gender)}}</p>
                            <p>职位：{{leader.title}}</p>
                            <p>简介：{{leader.introduce}}</p>
                        </i-col>
                    </Row>
                </Card>
            </i-col>
        </Row>
    </div>
</template>

<script>
    import Axios from "../axios";
    import Common from "../common";
    import HeadTitle from "./component/HeadTitle.vue";

    export default {
        components: {
            HeadTitle
        },
        name: "leader",
        data() {
            return {
                leaders: []
            }
        },
        created() {
            Axios.get("/leaders/all").then((response) => {
                if (response.status === 200) {
                    this.leaders = response.data.map((item) => {
                        return {
                            id: item.id,
                            name: item.name,
                            img: item.headPath + item.head,
                            gender: item.gender,
                            title: item.title,
                            introduce: item.introduce
                        }
                    });
                } else {
                    this.$Message.error("获取校领导信息失败。");
                }
            });
        },
        methods: {
            toHome() {
                this.$router.push("/");
            },
            renderGender(gender) {
                return Common.renderGender(gender);
            }
        }
    }
</script>
